<template>
	<view id="tmpl">
		<!-- <hd-message-bar :index='2' @on_change="OnChange"></hd-message-bar> -->
		<view style="margin-top: 15px;">
			<view class="list" v-for="(item, index) in announcement" :key="index">
				<view class="item">
					<view class="detial">
						<view class="title">
							<text class="nickname">{{ item.createBy }}</text>
							发布通报
						</view>
						<view class="info">
							<view>
								<text>{{ item.readNum }}</text>
								人阅读，
								<text>{{ item.favNum }}</text>
								人收藏
							</view>
							<view class="datetime">
								<text>{{ item.createTime }}</text>
							</view>
						</view>
					</view>

					<view class="content" v-html="item.tbContent"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import hdMessageBar from '../../components/hd-message-bar/hd-message-bar.vue';

export default {
	data() {
		return {
			announcement: []
		};
	},
	methods: {
		onLoad: function() {},
		onShow: function() {
			this.$_if.Initialize(this);
			let _this = this;
			this.$_if.Initialize(this);
			let url = '/' + _this.pageNum + '/' + _this.pageSize;
			this.$api.tgxx(url).then(res => {
				_this.announcement = res.data.rows;
			});
		},
		scrollDownPage: function() {
			let _this = this;
			this.pageNum += 1;
			this.$api
				.tglist({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize
				})
				.then(res => {
					_this.announcement = res.data.rows;
					_this.announcement.push(res.data.rows);
				});
		},
		OnChange(item) {
			this.GoToPage('message', item.url);
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: $background-color-2;
	// padding-top: calc(var(--status-bar-height) + 64upx);
}

.list {
	// padding-top: 70upx;
	padding-bottom: 0;

	.item {
		position: relative;
		background-color: $background-color-1;
		padding: 20upx;
		margin-top: 10upx;

		.detial {
			border-bottom: solid 1px #e0e0e0;

			.title {
				font-size: $font-size-title-2;
				color: $font-color-2;
				padding: 20upx 0;
				padding-top: 0;

				.nickname {
					color: #4e0606;
					padding: 0 10upx;
				}
			}

			.info {
				@extend .flex-between;
				font-size: $uni-font-size-sm;
				padding-bottom: 10upx;
			}

			.datetime {
				color: $font-color-4;
				position: absolute;
				right: 30rpx;
				top: 40rpx;
			}
		}

		.content {
			padding: 5upx;
			padding-top: 10upx;
		}
	}
}

.collection {
	position: absolute;
	padding: 12upx 35upx;
	color: $font-color-1;
	background-color: #57a9be;
	display: inline;
	right: 30upx;
	border-radius: 10upx;
	margin-top: -110upx;
	font-size: $uni-font-size-base;
}
</style>
